<!-- 头部公用 -->
<template>
  <div class="">
    <div class="headBack">
      <el-row class="container">
        <el-col :span="24">
          <!-- pc端导航 -->
          <div class="headBox">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
              <el-menu-item index="/Home"><i class="fa fa-wa fa-home"></i> 首页</el-menu-item>
              <el-submenu index="/Share">
                <template slot="title"><i class="fa fa-wa fa-archive"></i> 分类</template>
                <el-menu-item v-for="(item,index) in classListObj" :key="'class1'+index" :index="'/Share?classId='+item.id">{{item.name}}</el-menu-item>
              </el-submenu>
              <el-menu-item index="/Reward"><i class="fa fa-wa fa-cny"></i> 赞赏</el-menu-item>
              <el-menu-item index="/Friendslink"><i class="fa fa-wa fa-users"></i>友链</el-menu-item>
              <el-menu-item index="/MyFollow"><i class="fa fa-wa fa-heart"></i>我的关注</el-menu-item>
              <el-menu-item index="/Briefing"><i class="fa fa-wa fa-weibo"></i>每日简报</el-menu-item>
              <el-menu-item index="/Chat"><i class="fa fa-wa fa-qq"></i>聊天室</el-menu-item>
              <div class="userInfo">
                <div v-show="!haslogin" class="nologin">
                  <a href="javascript:void(0);" @click="logoinFun(1)">登录&nbsp;</a>|<a href="javascript:void(0);" @click="logoinFun(0)">&nbsp;注册</a>
                </div>
                <div v-show="haslogin" class="haslogin">
                  <i class="fa fa-fw fa-user-circle userImg">{{userInfo}}</i>
                  <ul class="haslogin-info">
                    <li>
                      <a href="#/UserInfo">个人中心</a>
                    </li>
                    <li>
                      <a href="#/ReplyMe">

                        <el-badge :value="messageValue" :max="52" class="item">
                          回复我的
                        </el-badge>
                      </a>
                    </li>
                    <li>
                      <a href="http://154.8.200.181:8082/" target="_blank">
                        后台管理
                      </a>
                    </li>


                    <li>
                      <a href="javascript:void(0);" @click="userlogout">退出登录</a>
                    </li>
                  </ul>
                </div>
              </div>
            </el-menu>
          </div>
        </el-col>
      </el-row>
    </div>



    <!--通知公告详情 -->
    <el-dialog :title="form.noticeTitle" :visible.sync="openDetail" width="800px" append-to-body>
      <div style="margin-top:-20px;margin-bottom:10px;">
        <el-tag size="mini" effect="dark" type="warning" v-if="form.noticeType==2">公告</el-tag>
        <el-tag size="mini" effect="dark" v-else>信息</el-tag>
        <span style="margin-left:20px;">{{form.createTime}}</span>
      </div>
      <div v-loading="loadingDetail" class="content">
        <div v-html="form.noticeContent" style="margin-left:0px;margin-right:76px" class="ql-editor"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDetail"> 关 闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    import {getUserInfo, logout} from '../api/user'
    import { getInfo,getLoginUserName} from "@/api/login";
    import {getToken, removeToken} from '../utils/auth'
    import {getCategoryList} from '../api/category'
    import {
        Typeit
    } from '../utils/plug.js'
    import {getNotice} from "../api/notice";
    export default {
        data() { //选项 / 数据
            return {
                openDetail:false,
                loadingDetail : false,
                // 遮罩层
                loading: true,
                beforeRouteEntered: false, // 新增标志位
                form: {},
                flag: true,
                messageValue:0,
                url: "ws://154.8.200.181:8989/websocket/message/" + getToken(),
                message: "",
                text_content: "",
                ws: null,
                userInfo: '未登录', //用户信息
                haslogin: false, //是否已登录
                classListObj: '', //分类
                activeIndex: '/', //当前选择的路由模块
                state: '', //icon点击状态
                pMenu: true, //手机端菜单打开
                // path:'',//当前打开页面的路径
                input: '', //input输入内容
                headBg: 'url(static/img/headbg05.jpg)', //头部背景图
                headTou: '', //头像
                projectList: '' //项目列表
            }
        },
        watch: {

        },
        methods: {
            closeDetail() {
                this.titleDetail = "详情";
                this.openDetail = false;
                this.reset();
            },

            openDetailDialog(id) {
                this.openDetail = true;
                this.loadingDetail = true;
                getNotice(id).then(response => {
                    this.form = response.data;
                    this.openDetail = true;
                    this.loadingDetail = false;
                });

            },
            reset() {
                this.form = {
                    noticeId: undefined,
                    noticeTitle: undefined,
                    noticeType: undefined,
                    noticeContent: undefined,
                    status: "0"
                };
                this.resetForm("form");
            },
            //事件处理器
            join() {

                const wsuri = this.url;
                this.ws = new WebSocket(wsuri);
                const self = this;
                this.ws.onopen = function (event) {
                    self.text_content = self.text_content + "已经打开连接!" + "\n";

                };
                this.ws.onmessage = function (event) {
                    self.text_content = event.data + "\n";
                    if (event.data != '连接成功'){
                        if (!localStorage.getItem("messageValue")){
                            localStorage.setItem("messageValue",0)
                        }
                        self.messageValue =  parseInt(event.data) + parseInt(localStorage.getItem("messageValue"))
                        localStorage.setItem("messageValue",self.messageValue)
                    }
                };
                this.ws.onclose = function (event) {
                    self.text_content = self.text_content + "已经关闭连接!" + "\n";

                };

            },
            exit() {
                if (this.ws) {
                    this.ws.close();
                    this.ws = null;
                }
            },
            send() {
                if (this.ws) {
                    this.ws.send(this.message);
                } else {
                    alert("未连接到服务器");
                }
            },
            getUserInfo(){
                getLoginUserName().then((resp)=>{
                    this.userInfo = resp.data.name
                    this.messageValue = resp.data.messageValue
                    if (resp.data.newNoticeIsRead != true){
                        this.openDetailDialog(resp.data.newNoticeIsRead)
                    }
                })
            } ,
            handleOpen(key, keyPath) { //分组菜单打开
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) { //分组菜单关闭
                // console.log(key, keyPath);
            },
            searchChangeFun(e) { //input change 事件
                // console.log(e)
                if (this.input == '') {
                    this.$store.state.keywords = '';
                    this.$router.push({path:'/'});
                }
            },
            getCategoryList(){
                getCategoryList().then((response)=>{
                    this.classListObj = response
                })
            },
            handleSelect(key, keyPath) { //pc菜单选择
                //    console.log(key, keyPath);
            },
            logoinFun: function(msg) { //用户登录和注册跳转
                // console.log(msg);
                localStorage.setItem('logUrl', this.$route.fullPath);
                // console.log(666,this.$router.currentRoute.fullPath);
                if (msg == 0) {
                    this.$router.push({
                        path: '/Login?login=0'
                    });
                } else {
                    this.$router.push({
                        path: '/Login?login=1'
                    });
                }
            },
            // 用户退出登录
            userlogout: function() {
                var that = this;
                this.$confirm('是否确认退出?', '退出提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // console.log(that.$route.path);

                    logout().then((response)=>{
                        removeToken()
                        localStorage.removeItem('userInfo');
                        that.haslogin = false;
                        window.location.reload();
                        that.$message({
                            type: 'success',
                            message: '退出成功!'
                        });
                        if (that.$route.path == '/UserInfo') {
                            that.$router.push({
                                path: '/'
                            });
                        }
                    })
                }).catch(() => {
                    //
                });

            },
            routeChange: function() {
                var that = this;
                that.pMenu = true
                this.activeIndex = this.$route.path == '/' ? '/Home' : this.$route.path;
                if (localStorage.getItem('userInfo')) { //存储用户信息
                    that.haslogin = true;
                    that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
                    // console.log(that.userInfo);
                } else {
                    that.haslogin = false;
                }
                //获取分类
                this.getCategoryList()

                if ((this.$route.name == "Share" || this.$route.name == "Home") && this.$store.state.keywords) {
                    this.input = this.$store.state.keywords;
                } else {
                    this.input = '';
                    this.$store.state.keywords = '';
                }
            }
        },
        components: { //定义组件
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route': 'routeChange'
        },
        created() { //生命周期函数
            //判断当前页面是否被隐藏
            var that = this;
            var hiddenProperty = 'hidden' in document ? 'hidden' :
                'webkitHidden' in document ? 'webkitHidden' :
                    'mozHidden' in document ? 'mozHidden' :
                        null;
            var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
            var onVisibilityChange = function() {
                if (!document[hiddenProperty]) { //被隐藏
                    if (that.$route.path != '/DetailShare') {
                        if (localStorage.getItem('userInfo')) {
                            that.haslogin = true;
                        } else {
                            that.haslogin = false;
                        }
                    }
                }
            }
            document.addEventListener(visibilityChangeEvent, onVisibilityChange);
            // console.log();
            this.routeChange();
            this.getUserInfo();
            //this.join();
        },
        mounted() { //页面元素加载完成
            var that = this;

        }
    }
</script>

<style>
  /*********头部导航栏********/

  /*头部导航栏盒子*/

  .headBack {
    width: 100%;
    background: rgba(40, 42, 44, 0.6);
    /*margin-bottom:30px;*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100;
  }
  .item {
    text-align: center;
  }
  .headBox li.is-active {
    /*background: #48456C;*/
    background: rgba(73, 69, 107, 0.7);
  }

  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
    border-bottom: none!important;
  }

  .headBox .el-menu {
    background: transparent;
    border-bottom: none!important;
  }

  .headBox .el-menu-demo li.el-menu-item,
  .headBox .el-menu--horizontal .el-submenu .el-submenu__title {
    height: 38px;
    line-height: 38px;
    border-bottom: none!important;

  }

  .headBox .el-submenu li.el-menu-item {
    height: 38px;
    line-height: 38px;
  }

  .headBox li .fa-wa {
    vertical-align: baseline;
  }

  .headBox ul li.el-menu-item,
  .headBox ul li.el-menu-item.is-active,
  .headBox ul li.el-menu-item:hover,
  .headBox .el-submenu div.el-submenu__title,
  .headBox .el-submenu__title i.el-submenu__icon-arrow {
    color: #fff;
  }

  .headBox .el-menu--horizontal .el-submenu>.el-menu {
    top: 38px;
    border: none;
    padding: 0;
  }

  .headBox>ul li.el-menu-item:hover,
  .headBox>ul li.el-submenu:hover .el-submenu__title {
    background: #48456C;
    border-bottom: none;
  }

  .headBox>ul .el-submenu .el-menu,
  .headBox>ul .el-submenu .el-menu .el-menu-item {
    background: #48456C;
  }

  .headBox>ul .el-submenu .el-menu .el-menu-item {
    min-width: 0;
  }

  .headBox>ul .el-submenu .el-menu .el-menu-item:hover {
    background: #64609E;
  }

  /*pc搜索框*/

  .headBox .pcsearchbox {
    padding: 0;
    max-width: 170px;
    /*min-width: 30px;*/
    height: 100%;
    line-height: 38px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .headBox .pcsearchbox:hover .pcsearchinput {
    opacity: 1;
    /*transform: scaleX(1);*/
    visibility: visible;
  }

  .headBox .pcsearchbox i.pcsearchicon {
    color: #fff;
    padding-left: 10px;
  }

  .headBox .pcsearchbox .pcsearchinput {
    width: 180px;
    padding: 10px 20px 10px 20px;
    background: rgba(40, 42, 44, 0.6);
    border-radius: 0 0 2px 2px;
    position: absolute;
    right: 0;
    top: 38px;
    opacity: 0;
    visibility: hidden;
    /*transform: scaleX(0);*/
    transform-origin: right;
    transition: all 0.3s ease-out;
  }

  .headBox .pcsearchbox .hasSearched {
    opacity: 1;
    /*transform: scaleX(1);*/
    visibility: visible;
  }

  .headBox .pcsearchbox .el-input {
    width: 100%;
  }

  .headBox .el-input__inner {
    height: 30px;
    border: none;
    background: #fff;
    /*border: 1px solid #333;*/
    border-radius: 2px;
    padding-right: 10px;
  }

  .headBox .userInfo {
    height: 100%;
    line-height: 38px;
    position: absolute;
    right: 30px;
    top: 0;
    color: #fff;
  }

  .headBox .userInfo a {
    color: #fff;
    font-size: 13px;
    transition: all 0.2s ease-out;
  }

  .headBox .userInfo a:hover {
    color: #48456C;
  }

  .headBox .nologin {
    text-align: right;
  }

  .headBox .haslogin {
    text-align: right;
    position: relative;
    min-width: 80px;
    cursor: pointer;
  }

  .headBox .haslogin:hover ul {
    visibility: visible;
    opacity: 1;
  }

  .headBox .haslogin ul {
    background: rgba(40, 42, 44, 0.6);
    padding: 5px 10px;
    position: absolute;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
  }

  .headBox .haslogin ul li {
    border-bottom: 1px solid #48456C;
  }

  .headBox .haslogin ul li:last-child {
    border-bottom: 1px solid transparent;
  }

  /*******移动端*******/

  .mobileBox {
    position: relative;
    height: 38px;
    line-height: 38px;
    color: #fff;
  }

  .hideMenu {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 38px;
  }

  .hideMenu ul.mlistmenu {
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    box-sizing: border-box;
    z-index: 999;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), 0 0 8px 0 rgba(0, 0, 0, .04);
    background: #48456C;
    color: #fff;
    border-right: none;
  }

  .hideMenu .el-submenu .el-menu {
    background: #64609E;
  }

  .hideMenu .el-menu-item,
  .hideMenu .el-submenu__title {
    color: #fff;
  }

  .hideMenu>i {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
  }

  .hideMenu .el-menu-item,
  .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }

  .mobileBox .searchBox {
    padding-left: 40px;
    width: 100%;
    box-sizing: border-box;
  }

  .mobileBox .searchBox .el-input__inner {
    display: block;
    border-radius: 2px;
    border: none;
    height: 25px;
  }

  .hideMenu ul.mlistmenu.pshow {
    display: block;
  }

  .hideMenu ul.mlistmenu .el-submenu__icon-arrow,
  .mobileBox li.el-menu-item a {
    color: #fff;
  }

  .hideMenu>ul li.el-menu-item:hover,
  .hideMenu>ul li.el-menu-item.is-active {
    background: #48576a;
  }



  /*头部背景图*/

  .headImgBox {
    height: 250px;
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
    margin-bottom: 90px;
  }

  .h-information {
    text-align: center;
    width: 70%;
    margin: auto;
    position: relative;
    top: 480px;
    padding: 40px 0;
    font-size: 16px;
    opacity: 0.98;
    background: rgba(230, 244, 249, 0.8);
    border-radius: 5px;
    z-index: 1;
    animation: b 1s ease-out;
    -webkit-animation: b 1s ease-out;
  }

  @-webkit-keyframes b {
    0% {
      -webkit-transform: translateY(90px);
      transform: translateY(90px);
    }
    80% {
      -webkit-transform: translateY(5px);
      transform: translateY(5px)
    }
    90% {
      -webkit-transform: translateY(-5px);
      transform: translateY(-5px)
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }
  }

  @keyframes b {
    0% {
      -webkit-transform: translateY(90px);
      transform: translateY(90px);
    }
    80% {
      -webkit-transform: translateY(5px);
      transform: translateY(5px)
    }
    90% {
      -webkit-transform: translateY(-5px);
      transform: translateY(-5px)
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }
  }

  .h-information img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    object-fit: cover;
  }

  .h-information img:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }

  .h-information h2 {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    /*font-family: 'Sigmar One';*/
  }
  .h-information h2  a{
    background: linear-gradient(to right, #DF2050, #48456D);
    -webkit-background-clip: text;
    color: transparent;
  }
  .headImgBox .scene {
    width: 100%;
    /*height:300px;*/
    text-align: center;
    font-size: 100px;
    font-weight: 200;
    color: #fff;
    position: absolute;
    left: 0;
    top: 160px;
    font-family: 'Sigmar One', Arial;
    text-shadow: 0 2px 2px #47456d;

  }

  .headImgBox .scene span {
    transform: matrix(1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;
  }

  .saying:after {
    content: "|";
    font-family: Arial, sans-serif;
    font-size: 1em;
    /*line-height: 0;*/
    display: inline-block;
    vertical-align: baseline;
    opacity: 1;
    text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;
    animation: caret 500ms infinite;
  }

  @keyframes caret {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }


</style>
